{extend name="template/base" /}
{block name="content"}
<!--select2样式 start -->
<link href="__LIB__/select2-4.0.3/dist/css/select2.min.css" rel="stylesheet" />
<div class="page-container">
    <form class="form form-horizontal" id="form" method="post" action="{:\\think\\Request::instance()->baseUrl()}">
        <input type="hidden" name="id" value="{$vo.id ?? ''}">
        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3">酒店名称：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <select name="hotel_id" id="hotel_id" class="select2" datatype="*" nullmsg="酒店名称不能为空" onchange="changeHotel()">
                    {if empty($vo['hotel_id'])}
                    <option value="">请选择酒店</option>
                    {/if}
                    {foreach $hotel as $vo2}
                    <option {if ($vo2['id'] == $vo['hotel_id'])} selected {/if} value="{$vo2.id}">{$vo2.id}:{$vo2.hotel_name}</option>
                    {/foreach}
                </select>
            </div>
            <div class="col-xs-3 col-sm-3"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3">开始时间：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <input type="text" class="input-text Wdate" autocomplete="off" placeholder="开始时间"
                       name="start_time" value="{$vo.start_time ?date('Y-m-d',$vo['start_time']): ''}"
                       {literal} onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" {/literal}  datatype="*"
                nullmsg="开始时间不能为空">
            </div>
            <div class="col-xs-3 col-sm-3"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3">结束时间：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <input type="text" class="input-text Wdate" autocomplete="off" placeholder="结束时间"
                       name="end_time" value="{$vo.end_time ?date('Y-m-d',$vo['end_time']): ''}"
                       {literal} onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" {/literal}  datatype="*"
                nullmsg="结束时间不能为空">
            </div>
            <div class="col-xs-3 col-sm-3"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3">备注：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <textarea class="textarea" placeholder="请输入备注"  name="remark" >{$vo.remark ?? ''}</textarea>
            </div>
            <div class="col-xs-3 col-sm-3"></div>
        </div>
        <table class="table table-border table-bordered table-hover table-bg mt-20" id="table2">
            <thead>
            <tr class="text-c">
                <th width="25"><a href="javascript:" class="label label-success radius op-add" data-type="form"
                                  onclick="add()" data-header="1">增加</a></th>

                <th width="">房型</th>
                <th width="">预订量</th>
                <th width="70">操作</th>
            </tr>
            </thead>
            <tbody id="tbody">

            </tbody>
        </table>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <button type="submit" class="btn btn-primary radius">&nbsp;&nbsp;提交&nbsp;&nbsp;</button>
                <button type="button" class="btn btn-default radius ml-20" onClick="layer_close();">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
            </div>
        </div>
    </form>
</div>
{/block}
{block name="script"}
<script type="text/javascript" src="__LIB__/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="__LIB__/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="__LIB__/select2-4.0.3/dist/js/select2.min.js"></script>
<script type="text/javascript" src="__LIB__/template/template.js"></script>
<script type="text/javascript" charset="utf-8" src="__LIB__/tags-input/dist/jquery.tagsinput.js"></script>
<script type="text/javascript" charset="utf-8" src="__LIB__/tags-input/dist/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="__LIB__/tags-input/dist/jquery-ui.css" />
<script>
    function add() {
        var trLength = $('#tbody tr').length; // 获取#tbody下有几个tr
        // 随机字符串
        var str = 'a|b|c|d|e|f|g|h|i|j|k|l|m|n|o|p|q|r|s|t|u|v|w|x|y|z|1|2|3|4|5|6|7|8|9'
        // 获取打乱的字符串数组
        var strArr = str.split('|').sort(function () {
            return Math.random() - 0.5
        });
        var randomStr = '';
        if (!randomStr) {
            for (var i = 0; i < 5; i++) {
                randomStr += strArr[i] + ''
            }
        }
        randomStr = randomStr + (trLength + 1); // 作为房型的id
        console.log('randomStr', randomStr)
        var hotel_room_type_id = 'room_type' + randomStr;

        $("#tbody").append('<tr class="text-c">'+
            '<td style="text-align: center">' +
            '<input type="hidden">'+
            '</td>' +
            '<td style="text-align: center">' +
            '<select name="reservation[room_type_id][]" class="select2 room_type" id="' + hotel_room_type_id + '" >' +
            '<option value="">选择房型</option>' +
            '</select>' +
            '</td>' +
            '<td>'+'<input name="reservation[number_of_rooms][]" value="{$reservation.number_of_rooms}">'+
            '</td>'+
            '<td class="f-14">'+
            '<a href="javascript:" class="label label-success radius op-add" data-type="form" onclick="deletd(this)" >' +
            '删除</a>'+
            '</td>'+
            '</tr>');


        var hotel_id = $('#hotel_id   option:selected').val();
        $.ajax({
            type: 'POST',
            url: '/admin/hotel_reservation/getRoomType',
            data: {hotel_id: hotel_id},
            success: function (ret) {
                console.log('ret', ret)
                if (ret.code == 1){
                    layer.msg(ret.msg)
                }else if (ret.code == 5){
                    var data = ret.data;
                    console.log('data', data);
                    var len = data.length;
                    if (len){
                        for (var i = 0; i < len; i++) {
                            $("#" + hotel_room_type_id).append("<option value='" + data[i].room_type_id + "'>" + data[i].room_type_name + "</option>")
                            $("#" + hotel_room_type_id + ' option:eq(0)').attr('selected', 'selected');//选中第一个
                        }
                    }
                }
                $('#'+hotel_room_type_id).select2({
                    language: "zh-CN", //设置 提示语言
                    width: "100%", //设置下拉框的宽度
                    theme: "classic"

                });
            }
        })

    }


    function deletd(nowTd) {
        $(nowTd).parent().parent().remove();
    }


    $(function () {
        ;

        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });

        $("#form").Validform({
            tiptype: 2,
            ajaxPost: true,
            showAllError: true,
            callback: function (ret){
                ajax_progress(ret);
            }
        });
        //用户select2 js部分 start
        var hotel_id = $("#hotel_id").select2({
            language: "zh-CN", //设置 提示语言
            width: "100%", //设置下拉框的宽度
            theme: "classic"
        });
        {notempty name = "vo['hotel_id']"}
        hotel_id.val("{$vo['hotel_id']}").trigger("change");
        {/notempty}
            //用户select2 js部分 end
        })

</script>

<script>
    function changeHotel() {
        var hotel_id = $('#hotel_id   option:selected').val();
        if (!hotel_id) {
            layer.msg('未选择酒店');
            //
            return false;
        } else {
            $("#table2 tr:not(:first)").remove();
        }
    }

</script>
{/block}
